<template>
  <div>
    <el-input
      v-if="hasFilter"
      v-model="columnName"
      clearable
      size="small"
      prefix-icon="el-icon-search"
      style="margin-bottom: 20px"
      placeholder="输入关键字进行过滤">
    </el-input>
    <el-tree
      ref="tree"
      empty-text=""
      :data="treeData"
      :load="loadNode"
      lazy
      :show-checkbox="showCheckbox"
      draggable
      @node-drag-start="handleDragStart"
      @node-drag-end="handleDragEnd"
      @check-change="handleCheckChange"
      @node-click="handlNodeClick"
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      :filter-node-method="filterNode"
      :expand-on-click-node="true"
      highlight-current
      :props="props">
    </el-tree>
  </div>
</template>

<script>
  // import  draggable from 'vuedraggable';
  import { treeselect } from '@/api/metadata/colalias'
  import { listDatasource } from '@/api/metadata/datasource'
  import { listTableAlias } from '@/api/metadata/tablealias'
  import { listColAlias } from '@/api/metadata/colalias'

  export default {
    name: 'ColumnTree',
    watch: {
      columnName(val) {
        this.$refs.tree.filter(val);
      },
      datasourceId(val) {
        this.refreshRoot();
      }

    },
    created() {
    },
    data() {
      return {
        name: '',
        columnName: undefined,
        treeData: undefined,
        checkedNodes: [],
        node_had: [], // 触发 tree 的 :load=loadNode 重复触发  动态更新tree
        resolve_had: [], // 触发 tree 的 :load=loadNode 重复触发  动态更新tree
        props: {
          label: 'name',
          isLeaf: (data, node) => {
            //默认层级为3(字段)时为叶子结点
            if (node.level == 3) {
              return true
            }
          }
        }
      }
    },
    props: {
      /* 数据源标识 */
      datasourceId: {
        type: Number
      },
      dropable: {
        type: Boolean
      },
      showCheckbox: {
        type: Boolean
      },
      isDimension:{
        type: String
      },
      isQuota:{
        type: String
      },
      hasFilter:{
        type: Boolean
      }
    },
    methods: {
      refreshRoot(){
        this.node_had.childNodes = []; //把存起来的node的子节点清空，不然会界面会出现重复树！
        this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
      },
      //过滤node
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1
      },
      // 查询下拉树结构
      getTreeselect() {
        treeselect({ datasourceId: this.datasourceId }).then(response => {
          this.treeData = response.data
        })
      },
      //按层级进行懒加载
      loadNode(node, resolve) {
        if (node.level === 0 && this.datasourceId) {
          this.node_had = node; //这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
          this.resolve_had = resolve; //同上，把node.level == 0的resolve也存起来
          listDatasource({ id: this.datasourceId }).then(response => {
            if (response.code === 0) {
              let ds = response.data.records[0]
              return resolve([{ name: ds.datasourceName, id: ds.id }])
            }
          })
        }
        if (node.level === 1) {
          listTableAlias({ datasourceId: this.datasourceId, status: 1, current: 1, size: 1000 }).then(response => {
            if (response.code === 0) {
              return resolve(response.data.records)
            }
          })
        }
        if (node.level === 2) {
          let params = { tablenameAliasId: node.data.id, current: 1, size: 1000 };
          if (this.isDimension)
            params.isdimension = this.isDimension;
          if (this.isQuota)
            params.isquota = this.isQuota;
          listColAlias(params).then(response => {
            return resolve(response.data.records)
          })
        }
      },
      //添加到组件
      addComponent(item) {
      },
      allowDrag(draggingNode) {
        return draggingNode.level === 3;
      },
      allowDrop(draggingNode, dropNode, type) {
        return this.dropable;
        // if(draggingNode === dropNode)
        //   return true;
        // return false;
      },
      handleDragStart(draggingNode, dropNode, dropType, ev) {
        // console.log('tree drag end: ', dropNode && dropNode.label, dropType)

        this.$emit('dragNode', draggingNode.data);
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        // console.log('tree drag end: ', dropNode && dropNode.label, dropType)
      },
      handleCheckChange(){},
      handlNodeClick(data,node){
        this.$emit('node-click', node);
      }
    }
  }
</script>

<style scoped>

</style>

